<template>
	<div style="padding-bottom: 140px;" class="homee">
		<Tabbar :leftText='homePage.url' :hidden='false'></Tabbar>
		<div
			id="hy-swiper"
			@touchstart="touchStart"
			@touchmove="touchMove"
			@touchend="touchEnd"
		>
			<div class="swiper">
				<div v-for="item in banners" class="swiper-item">
					<a :href="item.link"><img :src="item.image" alt="" /></a>
				</div>
			</div>
		</div>
		<div class="homebox">
			<!-- <div class="myOrder">
				<div style="box-sizing: border-box;width: 70%; position: absolute;top: 25%;left: 20px;color:white">
					<div style="margin: 10px 0;">{{ $t("textTrans.总余额") }}</div>
					<div style="margin: 10px 0;">TRX:</div>
					<div style="display: flex;align-items: center;">
						<div v-if="account" style="font-size: 19px;margin-right: 5px;">
							{{account[0]}}
						</div>
						<div>
							TRX
						</div>
					</div>
				</div>
			</div> -->
			<van-notice-bar left-icon="volume-o" background="#B5F3EA" color="#00A170"
				:text="swiperdata">
				<template #left-icon>
					<img src="../../assets/imgs/home/notice.png" style="width: 18px;height: 18px;" alt="">
				</template>
			</van-notice-bar>

			<!-- <div style="margin: 5px 0px;color: #FFF;">
				<div style="font-weight: 550;"> {{ $t("textTrans.常见问题") }}</div>
				<div v-if="slides[0]" @click="$router.push({name:'NoticeDetails',query:{item:JSON.stringify(slides[0])}})" style="text-indent: 32px;margin-top: 10px;"> 
				{{slides[0].title || ''}}
				</div>
			</div> -->
			<div style="width:100%;margin-top: 10px;">
				<div class="boxrp">
					<div class="butrex" style="width: 30%; " @click="$router.push({ path: 'pdraw' })">
						<div class="text-box">
							<img src="../../assets/imgs/home/home1.png" alt="" />
							<div>
								{{ $t("textTrans.存款") }}
							</div>
						</div>
					</div>
					<div class="butrex" style="width: 30%; " @click="$router.push({ path: 'withdraw' })">
						<div class="text-box">
							<img src="../../assets/imgs/home/home2.png" alt="" />

							<div>
								{{ $t("textTrans.提款") }}
							</div>
						</div>
					</div>
					<div class="butrex" style="width: 30%; " @click="$router.push({ path: 'onLine' })">
						<div class="text-box">
							<img src="../../assets/imgs/home/home3.png" alt="" />
							<div>
								{{ $t("textTrans.分享") }}
							</div>
						</div>
					</div>
				</div>
				<div class="boxrp">
					<div class="butrex" style="width: 30%; " @click="$router.push({ path: 'myteam' })">
						<div class="text-box">
							<img src="../../assets/imgs/home/home4.png" alt="" />
							<div>
								{{ $t("textTrans.团队") }}
							</div>
						</div>
					</div>
					<div class="butrex" style="width: 30%;" @click="downloadurl">
						<div class="text-box">
							<img src="../../assets/imgs/home/home5.png" alt="" />
							<div>
								APP
							</div>
						</div>
					</div>
					<div class="butrex" style="width: 30%;" @click="$router.push({ path: 'guide' })">
						<div class="text-box">
							<img src="../../assets/imgs/home/home6.png" alt="" />
							<div>
								{{ $t("textTrans.资讯") }}
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="boxrp">
				
				<div class="butrexrr" @click="$router.push({ path: 'withdraw' })">
					<div class="text-box">
						<img src="../../assets/imgs/home/home7.png" style="width: 80px;height: 60px;" alt="">
						<div style="font-weight: 550;">
							{{ $t("textTrans.基本") }}
						</div>
						<!-- <div style="margin: 10px 0;color: #999999;">
							{{ $t("textTrans.账户") }}
						</div> -->
						<div>
							<span style="color: #00A170;">{{account[2]}}</span>
							<!-- <span style="color: #999999;">TRX</span> -->
						</div>
					</div>
				</div>
				<div class="butrexrr" @click="$router.push({ path: 'pdraw' })">
					<div class="text-box">
						<img src="../../assets/imgs/home/home7.png" style="width: 80px;height: 60px;" alt="">
						<div style="font-weight: 550;">
							{{ $t("textTrans.推广") }}
						</div>
						<!-- <div style="margin: 10px 0;color:#999999">
							{{ $t("textTrans.账户") }}
						</div> -->
						<div>
							<span style="color: #00A170;">{{account[1]}}</span>
							<!-- <span style="color: #999999;">TRX</span> -->
						</div>
					</div>
				</div>
			</div>
			<!-- <div class="column-content">
				<div style="">
					<div data-v-768ac407="" class="invest-list-wrap">
					<div data-v-768ac407="" class="product-list-boxs">
						<div data-v-768ac407="" class="uni-view product-list-box" v-for="(item, index) in list" :key="index"
				@click="jumpTo(item.id)">
						<div data-v-768ac407="" class="uni-navigator col">
							<div data-v-768ac407="" class="uni-view product-item">
							<div data-v-768ac407="" class="uni-image">
								<img data-v-768ac407="" :src="item.image">
							</div>
							<div data-v-768ac407="" class="uni-view ft26 word">
							</div>
							<div data-v-768ac407="" class="uni-view c-white mt10 mb10">{{item.name}}</div>
							<div data-v-768ac407="" class="uni-view ft26 word">日收益:1.50-1.60%周期:7 天</div>
							</div>
						</div>
						
						
						</div>
					</div>
					</div>
				</div>
				</div> -->
		<div class="boxrr">
			<van-tabs v-model="active" type="card" color="#00A170" style="margin:0" @click="onClick">
				<van-tab :title="$t('textTrans.产品列表')"></van-tab>
				<!-- <van-tab :title="$t('textTrans.贸易')"></van-tab> -->
			</van-tabs>
		<div class="noticeWrap" v-if="active==0">
			<div v-for="(item, index) in projectList" :key="index"@click="jumpTo(item.id)"
					style="margin-top:14px;width: 98%;box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.04);background: #bededd;border-radius: 10px;">
					<div style="color: #333;font-size: 13px;margin: 10px;">
						<div style="width: 100%;display: flex;align-items: center;">
							<img style="width: 130px;height:88px;margin-right: 15px;" :src="item.image" alt="">
							<div style="color: #fff;font-size: 14px;" >
							<div style="color: #fff;">
								{{$t('textTrans.名称')}}:{{item.name}}
							</div>
							<div style="word-break: break-all; margin-top: 6px">
								{{$t('textTrans.循环')}}: <span style="color: rgb(0, 161, 112);">  {{ item.day }}{{$t('textTrans.天')}}</span>
							</div>
							<div style="margin-top: 6px">
								{{$t('textTrans.利率')}}: <span style="color: rgb(0, 161, 112);">  {{ item.rate }}%</span>
							</div>
					</div>
						</div>

					</div>
				</div>
			</div>
			<div v-else>
				<div class="apphome" @click="$router.push({ path: 'coinTread' })">
						<div>
							<div>+ {{accountdata.rate}}% TRX</div>
							<img src="../../assets/imgs/home/may1.png" style="width: 80%;height: 190px;margin: 20px 0;" >
							<div style="font-size: 15px;font-weight: 550;">{{ $t("textTrans.标题二") }}</div>
						</div>
				</div>
			</div>
		</div>
			<!-- <div class="xq-box">
				<div style="font-size: 16px;font-weight: 550;"> {{ $t("textTrans.标题一") }}</div>
				<div style="font-size: 14px;"> {{ $t("textTrans.标题二") }}</div>
				<img src="../../assets/imgs/home/home11.png" style="width: 80%;" alt="">
				<div @click="$router.push({ path: 'coinTread' })"
					style="background: #00A170;color:white;text-align: center;border-radius: 25px;height: 40px;line-height: 40px;width: 30%;margin: 0 auto;">
					{{ $t("textTrans.详情") }}
				</div>
			</div> -->

			<!-- <div style="text-align: center;padding: 15px 0;margin-top: 15px;">
				{{ $t("textTrans.平台数据展示") }}
			</div> -->
			<!-- <div class="boxrp" style="margin-top: 20px;">
				<div class="butrexrr">
					<div class="text-box">
						<img src="../../assets/imgs/home/home8.png" style="width: 60px;height: 60px;margin-top: -40px;"
							alt="">
						<div style="font-weight: 550;margin: 12px;">
							{{ $t("textTrans.累计利润") }}
						</div>
						<div style="color: #00A170;">
							{{homePage.accumulated_profit}}
						</div>
					</div>
				</div>
				<div class="butrexrr">
					<div class="text-box">
						<img src="../../assets/imgs/home/home9.png" style="width: 60px;height: 60px;margin-top: -40px;"
							alt="">
						<div style="font-weight: 550;margin: 12px;">
							{{ $t("textTrans.会员资格") }}
						</div>
						<div style="color: #00A170;">
							{{homePage.member_count}}
						</div>
					</div>
				</div>
			</div> -->

			<div class="xq-box">
				<div style="font-size: 16px;font-weight: 550;"> {{ $t("textTrans.关于我们") }}</div>
				<div style="font-size: 14px;"> {{ $t("textTrans.标题三") }}</div>
				<div style="font-size: 13px;color: #999999;"> {{ $t("textTrans.标题四") }}</div>
				<img src="../../assets/imgs/home/home10.png" style="width: 80%;" alt="">
			</div>

			<div class="xq-box" style="margin-bottom: 50px;">
				<div style="font-size: 16px;font-weight: 550;"> {{ $t("textTrans.全球合作伙伴") }}</div>
				<img src="../../assets/imgs/home/home12.png" style="width: 80%;" alt="">
			</div>
			<div>

			</div>
			<!-- 	<div class="goods-title">
			<div style="font-size: 18px">Users earn commissions</div>
		</div>
		<vue-seamless-scroll :data="listData" class="seamless-warp">
			<ul class="item">
				<li v-for="item in listData" style="margin-bottom: 14px;">
					<div style="display: flex;justify-content: space-between;">
						<span class="title">{{item.phone | filterphone}}</span><span class="date"
							style="color: #00A170;font-weight: 550;">{{item.commission_price}} RS</span>
					</div>
				</li>
			</ul>
		</vue-seamless-scroll> -->
			<!-- 	<div class="goods-title">
			<div style="font-size: 18px">Cooperative</div>
		</div>
		<div style="padding-bottom: 50px">
			<div style="padding:0 15px">
				<van-swipe style="height: 170px" :autoplay="3000" indicator-color="#D9BC84">
					<van-swipe-item v-for="item in cooperatedata" :key="item.id">
						<img :src="item.image" style="width: 100%; height: 170px" />
					</van-swipe-item>
				</van-swipe>
			</div>
		</div> -->
			<van-popup v-model="popupshow">
				<div style="width: 300px; text-align: center">
					<div style="
            width: 100%;
            background: #00A170;
            color: white;
            padding: 15px 0;
          ">
						{{ $t("textTrans.公告") }}
					</div>
					<div style="width: 100%; height: 300px;overflow: auto;">
						<div style="width: 80%; margin: 20px auto;padding-bottom: 50px;" v-if="logindata[index]" v-html="logindata[index].content">
							
						</div>
						<div style="display: flex;align-items: center;width:100%; position: absolute;bottom: 0;">
							<van-button type="default"   style="flex:1"
								@click="prepouop">						{{ $t("textTrans.上一个") }}</van-button>
								<van-button type="info" color="#00A170"  style="flex:1"
									@click="popupshow = false">						{{ $t("textTrans.确认") }}</van-button>
									<van-button type="default"  style="flex:1"
										@click="nextpouop">						{{ $t("textTrans.下一个") }}</van-button>
						</div>
					
					</div>
				</div>
			</van-popup>
		</div>
		<img src="../../assets/imgs/home/not.png" @click="popupshow = true" style="width: 40px;height:40px;position: fixed;right: 10px;bottom: 100px;" >
	</div>
</template>

<script>
	import vueSeamlessScroll from 'vue-seamless-scroll'
	import {
		bannerList,
		noticeList,
		cooperateList,
		indexrate,
		commissionList,
		rankList,
		oindexrderList,
		userAccount,
		newsList,
		loginconfig,
		projectList,
		remittanceRecordList,
		projectRate,
	} from "@/api/home";
	import {
		download,
		userInfo,
		homePage,
		account
	} from "@/api/personal";

	export default {
		props: {
			banners: {
				// 图片内容
				type: Array,
				default() {
					return [
						{ image: 'http://tr.abbnk.com/uploads/b1.jpg',link:'http://baidu.com' },
					{ image: 'http://tr.abbnk.com/uploads/b2.jpg',link:'http://baidu.com' },
					];
				},
			},
		},
		data() {
			return {
				index:0,
				popupshow: false,
				notice: [],
				slides: [],
				listData: [],
				creadlist: [],
				ratedata: [],
				currencylist: [],
				list: [{
						name: "1",
					},
					{
						name: "1",
					},
					{
						name: "1",
					},
					{
						name: "1",
					},
				],
				arr: [],
				account: {},
				moneydata:{},
				homePage:{},
				active: 0,
				loading: false,
				finished: true,
				offset: 5,
				noticelength: "",
				userInfo: [],
				logindata: {},
				cooperatedata: [],
				swiperdata:'',

				swiperItemCount: 0, // 轮播图数
				swiperStyle: "", // swiper的样式
				currentIndex: 1, // 当前的 index
				moveRatio: 0.25, // 跳转下一张图片所需的移动距离比例

				currentSlideIndex: 0,
				items: [
					{ image: 'https://troncwd.com/uploadFile/20240409/20240409202934.png' },
					{ image: 'https://troncwd.com/uploadFile/20240424/20240424051952.jpg' },
					{ image: 'https://troncwd.com/uploadFile/20240424/20240424051930.jpg' }
				],
				active: 0,
				projectList:[],
				buydata:[],
				accountdata:{},
			};
		},
		components: {
			vueSeamlessScroll
		},
		mounted() {
			// 由于网络请求的图片存在时间延迟，所以等 0.5s 让图片渲染出来
			setTimeout(() => {
				this.handleDom();
				this.swiperAuto();
			}, 500);
			
		},
		created() {
			if (localStorage.getItem("show")) {
				this.popupshow = true;
				localStorage.removeItem("show");
			}
			account().then((res) => {
				this.account = res;
			});
			homePage().then((res) => {
				this.homePage = res;
			});
			noticeList().then((res) => {
				this.slides = res;
			});
			this.getProjectList();
			this.getbuylisy();
			projectRate().then(res=>{
				this.accountdata=res
			})
			// userInfo().then((res) => {
			// 	this.userInfo = res;
			// });
			// rankList().then((res) => {
			// 	this.ratedata = res;
			// });
			// commissionList().then(res => {
			// 	this.listData = res
			// 	console.log(res)
			// })
			download().then((res) => {
				this.moneydata = res;
			});
			let lanage = localStorage.getItem('lanage');
			newsList({type:1}).then((res) => {
			let titlemap = ''
				res.map(item=>{
					titlemap += item.content + ' '
				})
				this.swiperdata = titlemap;
			});
			newsList({type:2}).then((res) => {
				this.logindata = res;
			});
			// userAccount().then((res) => {
			// 	this.currencylist = res;
			// });
			// bannerList().then((res) => {
			// 	this.slides = res;
			// });
			// newsList().then((res) => {
			// 	this.creadlist = res;
			// });
			// cooperateList().then((res) => {
			// 	this.cooperatedata = res;
			// });
		},
		methods: {
			getProjectList() {
				projectList().then((res) => {
					this.projectList = res;
				});
			},
			getbuylisy(){
				
			},
			jumpTo(e){
				this.$router.push({name:'graborderDetail',query:{
					id:e
				}})
			},
			onClick(e) {
				if (e > 0) {
					this.getbuylisy()
				} else {
					this.getProjectList();
				}
			},
			downloadurl(){
				window.location.href = this.moneydata.download_url
			},
			upout() {
				localStorage.removeItem('usertoken')
				this.$router.push({
					name: 'login'
				})
			},
			prepouop(){
				if(this.index +1 <= 1){
			}else{
				this.index = this.index -1
			}
			},
			nextpouop(){
				if(this.index+1 >= this.logindata.length){
				}else{
					this.index = this.index +1
				}
			},
			leftClick() {
				window.location.href = this.logindata.app_download;
			},
			rightClick() {
				this.$router.push({
					name: "NoticeList",
				});
			},
			gonoticeDea(item) {
				this.$router.push({
					name: "noticeDeatil",
					query: {
						item: JSON.stringify(item),
					},
				});
			},
			gourl(url) {
				window.location.href = url;
			},
			onLoad() {},
			// 设置滚动位置
			setTransform(position) {
			this.swiperStyle.transform = `translate3d(${position}px, 0, 0)`;
			this.swiperStyle[
				"-webkit-transform"
			] = `translate3d(${position}px), 0, 0`;
			this.swiperStyle["-ms-transform"] = `translate3d(${position}px), 0, 0`;
			},
			// 设置滚动过渡动画
			setTransition() {
			this.swiperStyle.transition = `transform 300ms`;
			},

			// 1.先操作 dom 元素
			handleDom() {
			// 获取 dom 对象
			let swiper = document.querySelector(".swiper");
			this.swiperItemCount = swiper.children.length;
			// 复制第一张图片和最后一张图片，分别放在最后面和最前面
			let nodeFirst = swiper.children[0].cloneNode(true);
			let nodeLast = swiper.children[this.swiperItemCount - 1].cloneNode(true);
			swiper.appendChild(nodeFirst); // 如果 cloneNode 报错，那么只能在 dom 中直接添加最后一个图片了
			swiper.insertBefore(nodeLast, swiper.children[0]);
			this.swiperStyle = swiper.style;
			this.totalWidth = swiper.offsetWidth;

			// 此时，currentIndex 的初始值为 1 ，那么先显示第二张图片
			this.setTransform(-this.currentIndex * this.totalWidth);
			},

			// 2. 实现用户触摸移动，图片也跟随移动，并根据滑动的方向跳转下一张图片的功能
			//触摸开始
			touchStart: function (e) {
			// 停止定时器
			this.stopTimer();

			// 获取并保存开始触摸的位置
			this.startX = e.touches[0].pageX;
			},
			// 触摸过程
			touchMove(e) {
			// 计算出用户拖动的距离
			this.currentX = e.touches[0].pageX;
			this.distance = this.currentX - this.startX;
			let currentPosition = -this.currentIndex * this.totalWidth;
			let moveDistance = this.distance + currentPosition;

			// 设置当前的位置，也就是随着触摸移动，图片也跟随移动
			this.setTransform(moveDistance);
			},
			// 触摸结束，根据滑动的方向跳转下一张图片
			touchEnd: function (e) {
			let distance_abs = Math.abs(this.distance);

			if (this.distance == 0) {
				return;
			} else if (
				this.distance < 0 &&
				distance_abs >= this.moveRatio * this.totalWidth
			) {
				this.currentIndex++;
			} else if (
				this.distance > 0 &&
				distance_abs >= this.moveRatio * this.totalWidth
			) {
				this.currentIndex--;
			}

			this.setTransition();
			this.setTransform(-this.currentIndex * this.totalWidth);
			this.currentScroll();

			this.swiperAuto();
			},

			// 3.判读第一张和最后一张图片的逻辑滚动，设置正确的滚动，抽取为函数
			currentScroll() {
			if (this.currentIndex == this.swiperItemCount + 1) {
				this.currentIndex = 1;
			} else if (this.currentIndex == 0) {
				this.currentIndex = this.swiperItemCount;
			}
			setTimeout(() => {
				this.swiperStyle.transition = "0ms";
				this.setTransform(-this.currentIndex * this.totalWidth);
			}, 300);
			},

			// 4. 实现点击小圆圈跳转相应的图片
			clickItem(item) {
			this.stopTimer();
			this.currentIndex = item;
			this.setTransform(-this.currentIndex * this.totalWidth);

			this.swiperAuto();
			},

			// 5.设置定时器，实现轮播功能
			swiperAuto() {
			this.playTimer = setInterval(() => {
				this.currentIndex++;
				this.setTransition();
				this.setTransform(-this.currentIndex * this.totalWidth);
				this.currentScroll();
			}, 2000);
			},
			stopTimer() {
			clearInterval(this.playTimer);
			},
			
		},
	};
</script>
<style lang="less" scoped>
	.homee{
		width: 100%;
		height: 100%;
		background: url('../../assets/imgs/home/background.png') no-repeat;
		background-size: 100% 100%; 
	}
	.box-nav {
		box-sizing: border-box;
		position: relative;
		background: rgb(255, 109, 0);
		width: 90%;
		border-radius: 10px;
		height: 110px;
		margin: 10px auto;
		padding: 15px 20px;
		display: flex;
		color: #FFF;
	}

	.user-account {
		position: absolute;
		bottom: -50px;
		width: 90%;
		border-radius: 10px;
		background: #bededd;
		padding: 10px 5%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0px auto;
		z-index: 999;
	}

	.boxrp {
		display: flex;
		justify-content: space-between;
		padding: 10px 0px;
		align-items: center;
	}

	.goods-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 6px 15px;
		color: #bededd;

	}

	.seamless-warp {
		height: 110px;
		overflow: hidden;
		background: #bededd;
		border-radius: 5px;
		padding: 12px 30px;
		margin: 10px 15px;
	}

	/deep/.van-notice-bar {
		margin: 10px 0;
		border-radius: 25px;
	}

	.xq-box {
		margin-top: 14px;
		text-align: center;
		padding: 15px;
		box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.04);
		border-radius: 10px;
		background: #B5F3EA;

		div {
			margin-bottom: 8px;
		}
	}

	.butrexrr {
		color: #333;
		background: #B5F3EA;
		width: 48%;
		padding: 15px 0;
		border-radius: 10px;
		box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.04);
		font-size: 14px;

		.text-box {
			text-align: center;
		}

		.text-line {
			text-align: center;
			font-size: 15px;
			font-weight: 550;
			margin-bottom: 6px;
		}

		img {
			width: 55px;
			height: 55px;
			margin-bottom: 5px;
		}
	}

	.butrex {
		color: #FFF;
		// background: white;
		width: 23%;
		// height:50px;
		padding: 6px 0;
		border-radius: 10px;
		font-size: 13px;

		.text-box {
			text-align: center;
		}

		.text-line {
			text-align: center;
			font-size: 15px;
			font-weight: 550;
			margin-bottom: 6px;
		}

		img {
			width: 55px;
			height: 55px;
			margin-bottom: 5px;
		}
	}

	.homebox {
		font-size: 14px;
		padding: 20px 14px;
		background: url('../../assets/imgs/home/background.png') no-repeat;
		background-size: 100% 100%; 
		// color: #FFF;
		// background: white;
	}

	.shop-content {
		padding: 10px 5px;
		box-sizing: border-box;
		width: 100%;
		overflow: auto;

		[class*="shop-nav"]::after {
			border-bottom: 1px solid #c0c4cc;
		}

		.shop-nav {
			width: 100px;
			font-size: 13px;
			margin: 0px 10px;
			color: #FFF;
			border-bottom: 1px solid #f8f8ff;
			text-align: center;
			// background: white;
			// display: flex;
			// justify-content: space-between;
			// align-items: center;
			padding-bottom: 15px;

			.text-tpye {
				padding: 0 7px;
			}

			img {
				border-radius: 10px 10px 0 0;
				width: 100%;
			}
		}
	}

	.notice-title {
		padding: 0 15px 10px 15px;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.notice {
			height: 15px;
			width: 50px;
		}

		.title {
			width: 100%;

			.van-notice-bar {
				font-size: 15px;
				height: 26px;
				padding: 0;
				background-size: 100% 100%;

				/deep/.van-ellipsis {
					height: 100%;

					.notice-swipe {
						width: 100%;
						height: 100%;
					}

					.van-swipe {
						height: 100%;
					}

					.van-swipe-item {
						height: 100%;
					}
				}
			}
		}
	}

	.myOrder {
		width: 100%;
		height: 150px;
		background: url(../../assets/imgs/home/home13.png) no-repeat;
		background-size: 100% 100%;
		position: relative;
		box-sizing: border-box;
		// margin-bottom: 70px;
	}

	.tools {
		width: 345px;
		height: 152.5px;
		border-radius: 5px;
		box-shadow: 0 0 2px #eee;
		margin: 0 auto;
		box-sizing: border-box;
		padding: 20px 19.5px 27.5px 15px;

		.van-cell {
			padding-left: 0;
		}

		.toolsTop {
			color: #111;
			font-size: 14px;
			margin-bottom: 10px;
		}

		img {
			width: 16px;
			height: 14.5px;
			margin: 5px 9.5px 0 0;
		}

		.locationIcon {
			width: 13px;
		}
	}

	.carousel-inner {
		display: flex;
		transition: transform 0.5s ease;
	}
	.carousel-item {
		width: 100%;
		display: none;

		img{
			width: 345px;
		}
	}
	.carousel-item.active {
		display: block;
	}

	#hy-swiper {
  position: relative;
  overflow: hidden;
  .swiper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    // transform: translateX(-375px);
    div {
      float: left;
      width: 100%;
      flex-shrink: 0; //收缩因子为0 则可以使得所有图片在同一行显示
      img {
        width: 100%;
      }
    }
  }
  .swiper-circle {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translate(-50%, 0);
    ul li {
      list-style: none;
      float: left;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      margin: 0 5px;
      background-color: #fff;
    }
    .swiperItemActive {
      background-color: var(--color-tint);
    }
  }
}

.column-content {
    overflow: hidden;
    background-color: #fff;
	position: relative;
    margin: 0.26667rem 0;
    border: 1px solid rgba(25,223,179,0);
    border-radius: 1.33333vw;
}
.invest-list-wrap {
    padding-bottom: 2.66667vw;
}
.product-list-box .product-item {
    display: grid;
    grid-template-columns: 30.66667vw 1fr;
    padding: 2.66667vw 0;
    position: relative;
}
.product-list-box .product-item:before {
    content: "";
    position: absolute;
    display: block;
    z-index: 2;
    top: 3.2vw;
    left: 29.33333vw;
    width: 56vw;
    height: 14.93333vw;
    background-color: #B5F3EA;
    border-radius: 1.33333vw;
}
.product-list-box .uni-image {
    grid-row: 1/4;
    margin-right: 4vw;
    overflow: hidden;
    width: 26.66667vw;
    height: 16vw;
    border-radius: 1.33333vw;
	display: inline-block;
    position: relative;
}
.product-list-box img {
    display: block;
    width: 100%;
    height: 100%;
}
.product-list-box .product-item .uni-view {
    display: block;
    z-index: 2;
}
.product-list-box .word {
    margin-top: 0;
    color: #1b2744;
}
.product-list-box .c-white {
    margin-top: 1.33333vw;
    color: rgb(0, 161, 112);;
    font-size: 3.73333vw;
}
.product-list-box .word {
    margin-top: 0;
    color: #1b2744;
}
.product-list-box {
    margin: 0 2.66667vw;
}
.noticeWrap {
	padding: 0.26667rem 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

}
.van-nav-bar {
	background: linear-gradient(270deg, #326964 0%, #326964 100%);
	margin:0;

	/deep/.van-nav-bar__title {
		color: #ffffff;
	}

	/deep/ .van-icon {
		color: #ffffff;
	}
}
.boxrr {
		margin-top: 11px;
		width: 100%;
}

/deep/.van-cell {
	background: transparent;
	color: white;
}

/deep/.van-field__control {
	color: white;
}
.apphome{
		margin: 20px;
		border-radius: 15px;
		padding: 20px;
		text-align: center;
		background: #B5F3EA;
	}
	/deep/.van-cell__value{
		color: #fff;
	}
</style>
